<template>
    <div class='imageView' :style="styles" >
        <div class="block" >
            <div class='img_item' v-for="(image,index) in imageList" :key="index">
                 <el-image
                    style="width: 100px; height: 100px"
                    :src="image.url"
                    fit="contain" 
                    :preview-src-list="srcList"  ></el-image>
                <div class='img_btn' >
                    <i class='el-icon-download' style='cursor:pointer;float:left' title='下载图片' @click="downImg(image.url)"></i>
                    <i class='el-icon-delete' style='cursor:pointer;float:right' title='删除图片' @click="delImg(image.url)"></i>
                </div>
            </div>
           
        </div>
        <div style='width:100%;text-align:center'>
            <el-button type="primary" @click="uploads" v-if="isreadonly!='Y'">上传</el-button>
            <el-button type="primary" @click="mainDevs" v-if="isreadonly!='Y'">高拍仪主摄像头上传</el-button>
        </div>
        <el-dialog
            append-to-body
            title="上传"
            :visible.sync="dialogVisible"
            width="80%">
            <el-upload
                class="upload-demo"
                drag
                action="/business/api/file/fileUpload"
                :on-success="uploadSuccess"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip"></div>
            </el-upload>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="高拍仪上传"
            :visible.sync="dialogVisible2"
            width="800">
            <high-shot-img :show.sync="dialogVisible2" :appid="appid" :showType="showType" @closes="closes" @uploadImg="uploadImg"></high-shot-img>
            
        </el-dialog>
       
    </div>
</template>
<script> 

import HighShotImg from '../highShot/HighShotImg.vue'
export default {
    name:'imageView',
    props:['images','heights','id','data','index','isreadonly',"appid"],
    components:{
        HighShotImg
    },
    data(){
        return{
            srcList:[],
            dialogVisible:false,
            dialogVisible2:false,
            showType:"main",
            action:'',
            imageList:this.images,
            currentValue:'',
            styles:"",
            p:"",
            id_:""
        }
    },
    created(){
        this.srcList=[];
        if(this.images){
            for(let i=0;i<this.images.length;i++){
                this.srcList.push(this.images[i].url)
            }
        }
        

        this.setData();
        let height=this.$parent.$parent.$parent.$parent.$parent.$el.clientHeight;
        let width=this.$parent.$parent.$parent.$parent.$parent.$el.clientWidth;
        this.styles="height:"+(height-200)+"px;width:"+width+"px;";
    },
    methods:{
        closes(){
            this.dialogVisible2=false;
        },
        mainDevs(){
            this.dialogVisible2=true;
            this.showType="main";
        },  
        childDevs(){
            this.dialogVisible2=true;
            this.showType="child";
        },
        uploads(){
            this.dialogVisible=true;
        },
        delImg(url){
            this.$confirm('确定要删除这条图片, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let index=-1
                let index2=-1
                for(let i=0;i<this.imageList.length;i++){
                    if(this.imageList[i].url==url){
                        index=i;
                    }
                }
                for(let i=0;i<this.srcList.length;i++){
                    if(this.srcList[i]==url){
                        index2=i;
                    }
                }
                this.imageList.splice(index,1);
                this.srcList.splice(index2,1);
                this.currentValue="";
                for(let i=0;i<srcList.length;i++){
                    
                    this.currentValue=this.currentValue=="" ? srcList[i]:this.currentValue+","+srcList[i];
                }
                if(this.p){
                    this.$set(this.data[this.p],this.id_,this.currentValue);
                }else{
                    this.$set(this.data,this.id_,this.currentValue);
                }
            }).catch(() => {
             
            });
            
        },
        downImg(url){
            let a = document.createElement("a");
            
            a.href ='business/api/file/downFile?path='+url.replace("/business/image/","");
            document.body.appendChild(a);
            a.click();  //下载
            URL.revokeObjectURL(a.href);    // 释放URL 对象 
            document.body.removeChild(a);   // 删除 a 标签

        },
        uploadImg(data){
            this.uploaded(JSON.parse(data));
        },
        uploadSuccess(response, file, fileList){
            this.uploaded(response);
            
            /*
            this.$emit('input',JSON.stringify(data));
            this.$emit('on-change',JSON.stringify(data));*/
            
        },
        uploaded(response){
             if(!this.imageList){
                this.imageList=[]; 
            }
            for(let i=0;i<response.length;i++){
                this.imageList.push(response[i]);
                this.srcList.push(response[i].url)
                this.currentValue=this.currentValue=="" ? response[i].url:this.currentValue+","+response[i].url;
            }
            let data={};
            data.id=this.id;
            data.val=this.currentValue;
            data.index=this.index;
            if(this.p){
                this.$set(this.data[this.p],this.id_,this.currentValue);
            }else{
                 this.$set(this.data,this.id_,this.currentValue);
            }
            this.$message({
                message: '上传成功!',
                type: 'success'
            });
        },
        setData(){
            if(!this.images){
                if(this.data){
                    let ids=this.id.split(".");
                    if(ids.length>1){
                        this.p=ids[0];
                        this.id_=ids[1];
                        if(this.index||this.index=='0'){
                            try{
                                this.currentValue=this.data[this.p][this.index][this.id_];
                            }catch(e){}
                        }else{
                            try{
                                this.currentValue=this.data[this.p][this.id_];
                            }catch(e){}
                        }
                        let images=this.currentValue.split(",");
                        this.imageList=[];
                        this.srcList=[];
                        for(let i=0;i<images.length;i++){
                            if(images[i]){
                                let data={};
                                data.url=images[i];
                                this.imageList.push(data);
                                this.srcList.push(images[i]);
                            }
                            
                        }
                    }
                
                }
            }
        }
    }
}
</script>
<style scoped>
    .imageView{
        height:100%;
        width:100%;
        display: flex;
        flex-direction: column;
    }
    .block{
        flex:1;
    }
    .upload-demo{
        width:100%;
        text-align:center;
    }
    .el-upload-list{
        height:50px;
        overflow: auto;
    }
    .img_item{
        padding:10px;
        border:1px solid #ddd;
        height:120px;
        width:120px;
        display:inline-block;
        border-radius: 5px;;
        margin-left:10px;
    }
</style>